<template>
	<tm-fullView>
		<tm-menubars title="预设样式" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<view class="ma-32 text-size-s text-weight-b ">背景颜色(更多前往官方文档)</view>
		<view class="ma-32 flex-between flex-wrap">
			<view v-for="(item,index) in ['red','green','bg-gradient-blue-lighten','bg-gradient-orange-accent']" :key="index" class="" style="width: 20%;">
				<view class="white pa-8 round-3 " :class="[`shadow-${item}-2`]">
					<view :class="[item]" class=" pa-24 round-2" style=""></view>
				</view>
			</view>
		</view>
		
		<tm-sheet :shadow="24">
			<view class="mb-24 text-size-s text-weight-b">outlined</view>
			<view class="flex-between">
				<view class="red py-10 my-10 px-10 outlined text-size-n round-2">红色</view>
				<view class="green py-10 my-10 px-10 outlined text-size-n round-2">绿色</view>
				<view class="blue py-10 my-10 px-10 outlined text-size-n round-2">蓝</view>
				<view class="grey py-10 my-10 px-10 outlined text-size-n round-2">灰色</view>
				<view class="orange py-10 my-10 px-10 outlined text-size-n round-2">橘色</view>
				<view class="purple py-10 my-10 px-10 outlined text-size-n round-2">紫色</view>
			</view>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="mb-24 text-size-s text-weight-b text-gradient-orange-accent">文字颜色</view>
			<view class="flex-between">
				<view class="text-red py-10 my-10 px-10  text-size-n">红色</view>
				<view class="text-green py-10 my-10 px-10  text-size-n">绿色</view>
				<view class="text-blue py-10 my-10 px-10  text-size-n">蓝</view>
				<view class="text-grey py-10 my-10 px-10  text-size-n">灰色</view>
				<view class="text-orange py-10 my-10 px-10  text-size-n">橘色</view>
				<view class="text-purple py-10 my-10 px-10  text-size-n">紫色</view>
			</view>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="mb-24 text-size-s text-weight-b">投影的使用</view>
			<view class="flex-between">
				<view class="green shadow-green-4 round-2 py-10 my-10 px-10  text-size-n">绿色</view>
				<view class="blue-grey shadow-blue-4 round-2 py-10 my-10 px-10  text-size-n">蓝</view>
				<view class="grey shadow-grey-4 round-2 py-10 my-10 px-10  text-size-n">灰色</view>
				<view class="orange shadow-orange-4 round-2 py-10 my-10 px-10  text-size-n">橘色</view>
				<view class="purple shadow-purple-4 round-2 py-10 my-10 px-10  text-size-n">紫色</view>
			</view>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="mb-24 text-size-s text-weight-b">圆角的使用</view>
			<view class="flex-between">
				<view class="red round-6 py-10 my-10 px-10 outlined text-size-n">全圆角</view>
				<view class="green  round-tl-6  py-10 my-10 px-10 outlined text-size-n">左顶</view>
				<view class="black round-tr-6 py-10 my-10 px-10 outlined text-size-n">右顶</view>
				<view class="black round-r-6 py-10 my-10 px-10 outlined text-size-n">右边</view>
			</view>
		</tm-sheet>
		<view class="py-24 px-0 text-size-xs text-grey-lighten-1 text mx-32 text-align-center">
			更多样式库，请前往官方文档中查看:https://jx2d.cn
			<view class=" text-weight-b" :class="[`text-${$tm.vx.state().tmVuetify.color || 'mytheme'}`]">
				用户Q群：
				<text selectable>18593916</text>
			</view>
		</view>
	</tm-fullView>
</template>

<script>
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	export default {
		components:{tmFullView,tmSheet,tmMenubars},
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped></style>
